<%--
  Created by IntelliJ IDEA.
  User: Y7000
  Date: 2024/4/11
  Time: 18:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/resources/lib/layui/css/layui.css">
    <script type="text/javascript" src="/resources/lib/layui/layui.js"></script>
    <script type="text/javascript" src="/resources/js/xadmin.js"></script>
</head>
<body>
<div class="layui-btn-group demoTable">
    <button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
    <button class="layui-btn" data-type="deleteCheckData">删除选中行数据</button>
    <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
    <button class="layui-btn" data-type="isAll">验证是否全选</button>
</div>
<table id="demo" lay-filter="test"></table>

</body>
<script>
    layui.use('table', function () {
        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#demo',
            url: '/user/getUserList', //数据接口
            page: true, //开启分页
            request: {
                pageName: 'pageNum', //页码的参数名称，默认：page
                limitName: 'pageSize' //每页数据量的参数名，默认：limit
            },
            cols: [[ //表头
                {type:'checkbox', fixed: 'left'},
                {field: 'id', title: 'ID', width: 200, sort: true, fixed: 'left'},
                {field: 'username', title: '用户名', width: 200},
                {field: 'nickname', title: '昵称', width: 200, sort: true},
                {
                    field: 'type', title: '类型', width: 200,
                    templet: function (d) {
                        var str = "";
                        if (d.type === 1) {
                            str = "管理员"
                        } else {
                            str = "普通用户"
                        }
                        //得到当前行数据，并拼接成自定义模板
                        return str
                    }
                },
                {
                    field: 'image', title: '头像', width: 200,
                    templet: function (d) {
                        // console.log(d)
                        var str = "<img src='/upload/" + d.image + "' style='height: 100px;'>";
                        //得到当前行数据，并拼接成自定义模板
                        return str;
                    }
                },
                {field: 'operate', title: '操作', width: 200, align: 'center', toolbar: '#barDemo'}
            ]],
            parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code === 200 ? 0 : 400, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.rows //解析数据列表
                };
            },

        });
        //监听表格复选框选择
        table.on('checkbox(test)', function(obj){
            console.log(obj)
        });
        //监听工具条
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            console.log(obj.data.id)
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.id + ' 的查看操作');
            } else if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        url: "/user/deleteUser",
                        type: "post",
                        data: {"id": obj.data.id},
                        success: function (res) {
                            console.log(res + "666")
                            obj.del();
                            layer.close(index);
                        }
                    })
                });
            } else if (obj.event === 'edit') {
                layer.alert('编辑行：<br>' + JSON.stringify(data))
            }
        });
        var $ = layui.$, active = {
            getCheckData: function(){ //获取选中数据
                var checkStatus = table.checkStatus('demo')
                    ,data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            },
            deleteCheckData: function(obj){ //删除选中数据
                var checkStatus = table.checkStatus('demo')
                    ,data = checkStatus.data;
                // layer.alert(JSON.stringify(data));
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        url: "/user/deleteUserListAjax",
                        type: "post",
                        contentType:"application/json",
                        data: JSON.stringify(data),
                        success: function (res) {
                            console.log(res + "666")
                            layer.close(index);
                        }
                    })
                });
            },
            getCheckLength: function(){ //获取选中数目
                var checkStatus = table.checkStatus('demo')
                    ,data = checkStatus.data;
                layer.msg('选中了：'+ data.length + ' 个');
            },
            isAll: function(){ //验证是否全选
                var checkStatus = table.checkStatus('demo');
                layer.msg(checkStatus.isAll ? '全选': '未全选')
            }
        };
        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</html>
